<template>
	<view>
		<view class="header">
			<text @click="back" class="iconfont icon-xiangzuojiantou">编辑用药人</text>
		</view>
		<view class="vtext">以下信息平台严格保密，仅用于处方开具和审核</view>
		<view class="content">
			<view class="cleft">
				<view>用药人姓名：</view>
				<view>关系：</view>
				<view>身份证号：</view>
				<view>出生年月：</view>
				<view>性别：</view>
				<view>手机号：</view>
				<view>疾病史：</view>
			</view>
			<view class="cright">
				<view>
					<input type="text" v-model="yname" />
				</view>
				<view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange" :value="index" :range="guanxiArr">
									<view class="uni-input">{{guanxiArr[index]}} <text class="iconfont icon-youjiantou"></text></view>
								</picker>
							</view>
						</view>
					</view>
				</view>
				<view>
					<input type="text" v-model="sfz" />
					
				</view>
				<view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker mode="date" fields='month' :value="date" @change="bindDateChange">
									<view class="uni-input">{{date}}</view>
								</picker>
							</view>
						</view>
					</view>
				</view>
				<view>
					<label class="radio" @click="radioChange('男')"><radio value="男" :checked="selecradio=='男'?true:false" @click="radioChange('男')"/>男</label>
					<label class="radio" @click="radioChange('女')"><radio value="女" :checked="selecradio=='女'?true:false" @click="radioChange('女')"/>女</label>
				</view>
				<view>
					<input type="text" v-model="sj" />
				</view>
				<view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange2" :value="index2" :range="bingshiArr">
									<view class="uni-input">{{bingshiArr[index2]}} <text class="iconfont icon-youjiantou"></text></view>
								</picker>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<button type="warn" @click="save">保存</button>
		</view>
	</view>
</template>

<script>
	import {reactive,toRefs,onMounted,computed} from 'vue';
	import {useStore} from 'vuex'
	import http from '../../utils/http.js';
	export default {
		setup(){
			const {state,commit,dispatch,getters} = useStore();
			let data=reactive({
				xrData:computed(()=>state.shopcart.updateyyr),
				guanxiArr: ['本人', '母亲', '父亲', '妻子', '儿子', '女儿', '其他'],
				index:0,
				date: '1945-02',
				selecradio:'男',
				bingshiArr:['过敏史', '家族病史','肝功能','肾功能','其他'],
				index2:0,
				yname:'kaisa',
				sfz:'xxxx',
				sj:'xxx',
				back(){
					uni.redirectTo({
						url:'/pages/yongyaorenguanli/yongyaorenguanli'
					})
				},
				// 关系
				bindPickerChange: function(e) {
					console.log(e)
				    console.log('picker发送选择改变，携带值为', e.detail.value)
				    data.index= e.detail.value
				},
				bindDateChange: function(e) {
					data.date = e.detail.value
				},
				// 疾病史
				bindPickerChange2: function(e) {
					console.log(e)
				    console.log('picker发送选择改变，携带值为', e.detail.value)
				    data.index2= e.detail.value
				},
				// 单选
				radioChange(e){
					// console.log(e)
					data.selecradio=e
				},
				save(){
					// 模拟用户1登录
					let id1=state.userID
					// let id=data.xrData.yyr_id
					let guanxi=data.guanxiArr[data.index]
					let jibingshi=data.bingshiArr[data.index2]
					let birth=data.date
					console.log(data.yname,birth,guanxi,jibingshi,data.selecradio,data.sfz,data.sj)
					// 将修改的数据存入数据库
					http({
						url:'/addyyr',
						method:'post',
						data:{
							id:id1,
							name:data.yname,
							guanxi:guanxi,
							sfz:data.sfz,
							birth:birth,
							xb:data.selecradio,
							tel:data.sj,
							jibingshi:jibingshi
						}
					}).then((res)=>{
						// console.log(res)
						if(res.data.code==200){
							// 查询该用户的所有用药人
							http({
								url:'/getyonghu',
								method:'post',
								data:{
									id:id1
								}
							}).then((res)=>{
								// console.log(res.data.data)
								if(res.data.code==200){
									commit('shopcart/setyongyaorenArr',res.data.data)
									if(state.shopcart.yongyaorenArr.length){
										for (let i = 0; i < state.shopcart.yongyaorenArr.length; i++) {
											// 将在使用的用药人存入仓库
											if(state.shopcart.yongyaorenArr[i].yyr_isUsed==1){
												commit('shopcart/setyongyaoren',state.shopcart.yongyaorenArr[i])
												break
											}
										}
									}	
								}
							})
							// 查询该用户的处方以及用药人信息
							http({
								url:'/getchufangxinxi',
								method:'post',
								data:{
									id:id1
								}
							}).then((res)=>{
								// console.log(res.data.data)
								if(res.data.code==200){
									commit('shopcart/getallchufangandyyrData',res.data.data)
									// console.log(state.shopcart.allchufangandyyrArr)
									for (let i = 0; i < state.shopcart.allchufangandyyrArr.length; i++) {
										if(state.shopcart.allchufangandyyrArr[i].cf_yonyaorenId==state.shopcart.yongyaoren.yyr_id &&state.shopcart.allchufangandyyrArr[i].cf_isshiyong==1){
											commit('shopcart/getchufangData',state.shopcart.allchufangandyyrArr[i])
										}
									}
								}
							})
							// uni.redirectTo({
							// 	url:'../yongyaorenguanli/yongyaorenguanli'
							// })
							uni.showToast({
								title:'保存成功',
								duration:1500
							})
						}
					})
				}
			})
			onMounted(()=>{
				
			})
			return {...toRefs(data)}
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	@import url("~@/static/fonts/iconfont.css");
	.header{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #efefef;
		display: flex;
		justify-content: space-between;
		background-color: white;
		>text:nth-child(2){
			color: red;
		}
	}
	.vtext{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
	.content{
		padding: 20rpx 0rpx;
		display: flex;
		justify-content: space-between;
		border-top: 1rpx solid #efefef;
		.cleft{
			padding-left: 30rpx;
			view{
				margin-top: 20rpx;
			}
		}
		.cright{
			margin-left: 20rpx;
			padding-right: 30rpx;
			flex: 1;
			view{
				margin-top: 20rpx;
			}
		}
	}
	.footer{
		width: 100%;
		box-sizing: border-box;
		// border-top: 1rpx solid #efefef;
		background-color: white;
		position: fixed;
		bottom: 0;
		button{
			border: 1px solid red;
			border-radius: 0;
		}
	}
	radio{
		transform: scale(0.7);
	}
</style>
